<template>
    <view class="orderOperation">
        <view class="card addressBox">
            <view>
                <image
                    style="width: 54rpx !important; height: 54rpx !important"
                    :src="BaseUrl + '/static/common/dw.png'"
                    mode="widthFix"
                />
            </view>
            <view class="text">
                <view class="user">
                    <text class="name">{{ detail.address.name }}</text>
                    <text class="mobile">{{ detail.address.mobile }}</text>
                </view>
                <view style="line-height: 1.3">
                    {{ detail.address.address }}
                </view>
            </view>
        </view>
        <view class="card">
            <view class="location">
                <image
                    :src="BaseUrl + '/static/common/dm.png'"
                    mode="scaleToFill"
                />
                <view class="box">
                    <view class="left">
                        <view class="title">
                            <image
                                :src="BaseUrl + '/static/common/cen7.png'"
                                mode="scaleToFill"
                            />
                            <text>{{ detail.shop.shopname }}</text>
                        </view>
                        <view class="address">
                            <!-- {{ detail.address.address }} -->
                        </view>
                    </view>
                    <view class="right">
                        <view
                            class="icon_tel"
                            @click="phoneTel(detail.address.mobile)"
                        >
                            <image
                                :src="BaseUrl + '/static/common/ddh.png'"
                                mode="scaleToFill"
                            />
                            <view>电话</view>
                        </view>
                        <view
                            class="icon_map"
                            @tap="
                                openMap(
                                    detail.shop.longitude,
                                    detail.shop.latitude
                                )
                            "
                        >
                            <image
                                :src="BaseUrl + '/static/common/daoh.png'"
                                mode="scaleToFill"
                            />
                            <view>导航</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="verification" v-if="detail.state == 3">
                <view class="box">
                    <image
                        :src="detail.verify[0].code_img"
                        mode="scaleToFill"
                    />
                    <view class="text"
                        >核销码：{{ detail.verify[0].code }}</view
                    >
                </view>
            </view>
        </view>
        <view class="card">
            <view class="center" v-for="i in list" :key="i" @click="go(i)">
                <image :src="BaseUrl + i.image" mode="scaleToFill" />
                <view class="center-info">
                    <view style="padding-right: 20rpx; box-sizing: border-box">
                        <view class="title" style="width: 43vw">{{
                            i.title
                        }}</view>
                        <view class="sub">{{ i.difference }}</view>
                    </view>
                    <view>
                        <view class="price">¥{{ i.price }}</view>
                        <view class="num">x{{ i.number }}</view>
                    </view>
                </view>
            </view>
            <view class="settlement">
                <view class="text">
                    共{{ list.length }}件,
                    <text style="color: #000">小计</text>
                    <text class="price"> ¥{{ num }} </text>
                </view>
            </view>
        </view>
        <view class="card">
            <view class="sub_box">
                <view class="title_T sub_item"> 预定信息 </view>
                <view class="sub_item">
                    <view class="title"> 配送方式 </view>
                    <view class="text"> 自提 </view>
                </view>
                <view class="sub_item">
                    <view class="title"> 订单备注 </view>
                    <view class="text"> {{ detail.remarks || "无备注" }} </view>
                </view>
                <view class="sub_item">
                    <view class="title"> 预约日期 </view>
                    <view class="text"> {{ detail.json.day }} </view>
                </view>
                <view class="sub_item">
                    <view class="title"> 入住人数 </view>
                    <view class="text"> {{ detail.json.num }} </view>
                </view>
                <view class="sub_item">
                    <view class="title"> 联系人 </view>
                    <view class="text"> {{ detail.json.name }} </view>
                </view>
                <view class="sub_item">
                    <view class="title"> 联系电话 </view>
                    <view class="text">
                        {{
                            detail.json.phone
                                ? detail.json.phone
                                : detail.mobile
                        }}
                    </view>
                </view>
            </view>
        </view>
        <view class="card">
            <view class="sub_box">
                <view class="title_T sub_item"> 订单信息 </view>
                <view class="sub_item">
                    <view class="title"> 核销状态 </view>
                    <view class="text">
                        {{ detail.state == 4 ? "已核销" : "未核销" }}
                    </view>
                </view>
                <view class="sub_item">
                    <view class="title"> 订单号 </view>
                    <view class="text">
                        {{ detail.pay.order_no }}
                    </view>
                </view>
                <view class="sub_item">
                    <view class="title"> 下单时间 </view>
                    <view class="text"> {{ detail.createtime_text }} </view>
                </view>
                <view class="sub_item">
                    <view class="title"> 下单时间 </view>
                    <view class="text">
                        {{ detail.paymenttime_text }}
                    </view>
                </view>
                <view class="sub_item" v-if="detail.state != 1">
                    <view class="title">支付方式</view>
                    <text class="text">{{
                        detail.pay.pay_type == 1
                            ? "微信支付"
                            : detail.pay.pay_type == 2
                            ? "支付宝支付"
                            : detail.pay.pay_type == 0
                            ? "余额支付"
                            : "余额支付"
                    }}</text>
                </view>
                <view class="sub_item" v-if="detail.state == 3">
                    <view class="title">发货时间</view>
                    <text class="text">{{ detail.delivertime_text }}</text>
                </view>
                <view class="sub_item" v-if="detail.shop">
                    <view class="title">商家名称</view>
                    <text class="text">{{ detail.shop.shopname }}</text>
                </view>
                <view class="sub_item" v-if="detail.pay">
                    <view class="title">商品价格</view>
                    <text class="text">{{ detail.pay.order_price }}元</text>
                </view>
                <view class="sub_item" v-if="detail.pay">
                    <view class="title">优惠价格</view>
                    <text class="text">{{ detail.pay.discount_price }}元</text>
                </view>
                <view class="sub_item" v-if="detail.pay">
                    <view class="title">使用积分</view>
                    <text class="text">{{
                        detail.pay.score ? detail.pay.score : 0
                    }}</text>
                </view>
                <view class="sub_item" v-if="detail.pay">
                    <view class="title">抵扣金额</view>
                    <text class="text"
                        >{{
                            detail.pay.score_price ? detail.pay.score_price : 0
                        }}元</text
                    >
                </view>
                <view class="sub_item" v-if="detail.pay">
                    <view class="title">{{
                        detail.state == 1 ? "应付金额" : "实付金额"
                    }}</view>
                    <text class="text red-status" v-if="detail.state !== 1"
                        >{{
                            detail.pay.actual_payment == 0.0
                                ? 0.01
                                : detail.pay.actual_payment
                        }}元
                    </text>
                    <text class="text red-status" v-if="detail.state == 1"
                        >{{
                            detail.pay.price == 0.0 ? 0.01 : detail.pay.price
                        }}元
                    </text>
                </view>
                <view class="sub_item" v-if="detail.state == 4">
                    <view class="title"> 核销时间 </view>
                    <view class="text">
                        {{ detail.taketime_text }}
                    </view>
                </view>
            </view>
        </view>
        <view class="sub_btn">
            <view class="btns">
                <view
                    class="btn btn_default"
                    @click="goComment(detail.id)"
                    v-if="detail.state != 3"
                    >去评价</view
                >
                <view
                    class="btn btn_success"
                    @click="
                        goShop(detail.goods[0].id, detail.goods[0].goods_id)
                    "
                    >再来一单</view
                >
            </view>
            <!-- <view class="btn">联系商家</view> -->
            <!-- <view class="btn">联系商家</view> -->
        </view>
    </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl: BaseUrl,
            list: [],
            detail: {},
            logistics: {},
            id: "",
            state: "",
            num: 0,
            //////////////////
            address: "",
            title: "四川大学华西医院",
            distance: 0, //"距离"
            latitude: 39.909, // 默认定在首都
            longitude: 116.39742,
            scale: 12, // 默认16
            markers: [],
            markerHeight: 30,
            doorAddress: [], //门店地址
        };
    },
    onLoad(e) {
        this.id = e.id;
        this.state = e.state;
    },
    onShow() {
        this.getDetail();
        this.onReadys(); //微信请求获取权限位置
    },
    methods: {
        go(i) {
            this.$request
                .get("api/wanlshop.product/goods", { id: i.id })
                .then((res) => {
                    if ([11, 14].includes(res.data.category.pid)) {
                        uni.navigateTo({
                            url:
                                "/dabai/pages/caterDetails/caterDetails?id=" +
                                i.id,
                        });
                    } else {
                        uni.navigateTo({
                            url: "/pages/product/goods?id=" + i.id,
                        });
                    }
                })
                .catch((e) => {
                    uni.showToast({
                        title: e.msg,
                        icon: "none",
                    });
                });
        },
        //一键拨打电话
        phoneTel(tel) {
            uni.makePhoneCall({
                phoneNumber: tel,
            });
        },
        //去评价
        goComment(id) {
            uni.navigateTo({
                url: "/upRelease/comment/comment?order_id=" + id,
            });
        },
        //再来一单
        goShop(id, goods_id) {
            this.$request
                .get("api/wanlshop.product/goods", { id: goods_id })
                .then((res) => {
                    if ([11, 14].includes(res.data.category.pid)) {
                        uni.navigateTo({
                            url:
                                "/dabai/pages/caterDetails/caterDetails?id=" +
                                goods_id,
                        });
                    } else {
                        uni.navigateTo({
                            url: "/pages/product/goods?id=" + goods_id,
                        });
                    }
                }).catch((e) => {
                    uni.showToast({
                        title: e.msg,
                        icon: "none",
                    });
                })
        },
        // 时间转成
        formatDate(timestamp) {
            const date = new Date(timestamp * 1000); // 注意：JavaScript中的时间戳是以毫秒为单位的，所以需要乘以1000
            const formattedTime = date.toLocaleString("zh-CN", {
                hour12: false,
            });
            return formattedTime;
        },

        // 订单
        getDetail() {
            this.$request
                .get("api/wanlshop/order/getOrderInfo", {
                    id: this.id,
                })
                .then((res) => {
                    this.detail = res.data;
                    this.list = this.detail.goods;
                    this.list.forEach((element) => {
                        this.num += Number(element.price);
                    });
                });
            this.$u
                .post("/api/wanlshop/order/getLogistics", {
                    id: this.id,
                })
                .then((res) => {
                    this.logistics = res.data;
                });
        },
        // 确认授权后，获取用户位置
        getLocationInfo() {
            const that = this;
            uni.getLocation({
                type: "gcj02",
                success: function (res) {
                    console.log(res, "经纬度");
                    console.log(that.detail);
                    // 暂时
                    that.longitude = res.longitude; //118.787575;
                    that.latitude = res.latitude; //32.05024;

                    let long = 0;
                    let lat = 0;
                    //小数点保留六位  经度
                    if (that.longitude.toString().indexOf(".") > 0) {
                        const longlatsplit = that.longitude
                            .toString()
                            .split(".");
                        if (longlatsplit.length >= 2) {
                            long =
                                parseFloat(
                                    longlatsplit[0] === "" ? 0 : longlatsplit[0]
                                ) +
                                parseFloat("." + longlatsplit[1].slice(0, 6));
                        }
                    }
                    if (that.latitude.toString().indexOf(".") > 0) {
                        const longlatsplit1 = that.latitude
                            .toString()
                            .split(".");
                        if (longlatsplit1.length >= 2) {
                            lat =
                                parseFloat(
                                    longlatsplit1[0] === ""
                                        ? 0
                                        : longlatsplit1[0]
                                ) +
                                parseFloat("." + longlatsplit1[1].slice(0, 6));
                        }
                    }
                    that.markers = [
                        {
                            id: "",
                            latitude: res.latitude,
                            longitude: res.longitude,
                            iconPath: "../../static/img/phone.png",
                            width: that.markerHeight, //宽
                            height: that.markerHeight, //高
                        },
                    ];
                },
            });
        },
        // 拒绝授权后，弹框提示是否手动打开位置授权
        openConfirm() {
            return new Promise((resolve, reject) => {
                uni.showModal({
                    title: "请求授权当前位置",
                    content: "我们需要获取地理位置信息，为您推荐附近的美食",
                    success: (res) => {
                        if (res.confirm) {
                            uni.openSetting().then((res) => {
                                if (
                                    res[1].authSetting["scope.userLocation"] ===
                                    true
                                ) {
                                    resolve(); // 打开地图权限设置
                                } else {
                                    reject();
                                }
                            });
                        } else if (res.cancel) {
                            reject();
                        }
                    },
                });
            });
        },

        // 彻底拒绝位置获取
        rejectGetLocation() {
            uni.showToast({
                title: "你拒绝了授权，无法获得周边信息",
                icon: "none",
                duration: 2000,
            });
        },
        onReadys() {
            // wx请求获取位置权限;
            this.getAuthorize()
                .then(() => {
                    //   同意后获取
                    this.getLocationInfo();
                })
                .catch(() => {
                    //   不同意给出弹框，再次确认
                    this.openConfirm()
                        .then(() => {
                            this.getLocationInfo();
                        })
                        .catch(() => {
                            this.rejectGetLocation();
                        });
                });
        },
        openMap(lng, lat) {
            //打开地图，并将门店位置传入
            uni.getLocation({
                success: (res) => {
                    uni.openLocation({
                        latitude: parseFloat(lat),
                        longitude: parseFloat(lng),
                        scale: 18,
                        name: this.detail.shop.shopnamee,
                        address: this.detail.shop.address,
                    });
                },
            });
        },
        //进行经纬度转换为距离的计算
        Rad(d) {
            return (d * Math.PI) / 180.0; //经纬度转换成三角函数中度分表形式。
        },
        /*
            计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
            默认单位km
        */
        getMapDistance(lat1, lng1, lat2, lng2) {
            var radLat1 = this.Rad(lat1);
            var radLat2 = this.Rad(lat2);
            var a = radLat1 - radLat2;
            var b = this.Rad(lng1) - this.Rad(lng2);
            var s =
                2 *
                Math.asin(
                    Math.sqrt(
                        Math.pow(Math.sin(a / 2), 2) +
                            Math.cos(radLat1) *
                                Math.cos(radLat2) *
                                Math.pow(Math.sin(b / 2), 2)
                    )
                );
            s = s * 6378.137; // EARTH_RADIUS;
            s = Math.round(s * 10000) / 10000; //输出为公里
            //s=s.toFixed(2);
            return s;
        },
        //计算距离

        //   初次位置授权
        getAuthorize() {
            return new Promise((resolve, reject) => {
                uni.authorize({
                    scope: "scope.userLocation",
                    success: () => {
                        resolve(); // 允许授权
                    },
                    fail: () => {
                        reject(); // 拒绝授权
                    },
                });
            });
        },
    },
    mounted() {
        // this.distance = this.getMapDistance(
        //     "104.04311",
        //     "30.64242",
        //     this.detail.shop.latitude,
        //     this.detail.shop.longitude
        // );
    },
};
</script>
<style lang="scss" scoped>
.orderOperation {
    padding: 30rpx 30rpx 100rpx 30rpx;

    .card {
        width: 100%;
        background: white;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }

    .addressBox {
        padding: 20rpx 30rpx;
        display: flex;
        align-items: center;

        .text {
            margin-left: 20rpx;

            .user {
                text {
                    line-height: 1.8em;
                }

                .name {
                    font-size: 34rpx;
                    font-weight: bold;
                }

                .mobile {
                    color: #777;
                    margin-left: 10rpx;
                }
            }
        }
    }

    .location {
        width: 100%;
        height: 200rpx;
        position: relative;

        image {
            width: 100%;
            height: 100%;
        }

        .box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;

            .left {
                width: 70%;
                padding-right: 50rpx;
                box-sizing: border-box;

                .title {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10rpx;

                    image {
                        width: 40rpx;
                        height: 40rpx;
                    }

                    text {
                        font-size: 30rpx;
                        font-weight: bold;
                        margin-left: 20rpx;
                    }
                }

                .address {
                    font-size: 24rpx;
                    color: #777;
                    line-height: 1.5em;
                }
            }

            .right {
                display: flex;

                .icon_tel {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 30rpx;

                    image {
                        width: 56rpx;
                        height: 56rpx;
                    }

                    view {
                        font-size: 24rpx;
                        margin-top: 10rpx;
                    }
                }

                .icon_map {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 30rpx;

                    image {
                        width: 56rpx;
                        height: 56rpx;
                    }

                    view {
                        font-size: 24rpx;
                        margin-top: 10rpx;
                    }
                }
            }
        }
    }

    .verification {
        width: 100%;
        padding: 30rpx 0 60rpx 0;

        .box {
            width: 300rpx;
            height: 300rpx;
            margin: 0 auto;
            text-align: center;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .center {
        display: flex;
        padding: 26rpx;

        image {
            max-width: 180rpx;
            max-height: 180rpx;
            margin-right: 20rpx;
        }

        .center-info {
            display: flex;

            .title {
                font-size: 32rpx;
                line-height: 1.4em;
            }

            .sub {
                font-size: 26rpx;
                opacity: 0.5;
                margin-top: 20rpx;
            }

            .price {
                font-size: 32rpx;
                font-weight: bold;
                line-height: 1.4em;
            }

            .num {
                font-size: 26rpx;
                opacity: 0.5;
                margin-top: 20rpx;
                text-align: right;
            }
        }
    }

    .settlement {
        padding: 0 30rpx 30rpx 0;

        .text {
            color: #777;
            font-size: 26rpx;
            display: flex;
            justify-content: flex-end;

            .price {
                color: #eb5c20;
                margin-left: 10rpx;
            }
        }
    }

    .sub_box {
        padding: 20rpx;

        .sub_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 10rpx;

            .title {
                font-size: 30rpx;
            }

            .text {
                color: #777;
            }
        }
    }

    .sub_btn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        background: white;
        border-top-left-radius: 30rpx;
        border-top-right-radius: 30rpx;

        .btns {
            display: flex;
            justify-content: flex-end;

            .btn {
                font-size: 30rpx;
                padding: 16rpx 40rpx;
                margin: 0 10rpx;
            }

            .btn_default {
                border-radius: 40rpx;
                color: #888888;
                border: 1px solid #ededed;
            }

            .btn_success {
                border-radius: 40rpx;
                color: #057748;
                border: 1px solid #3d654b;
            }
        }
    }
}
.red-status {
    color: #f43000;
}
.title_T {
    font-size: 34rpx;
    font-weight: bold;
}
</style>
